<template>
  <!-- node-key给节点设置唯一的标识符 -->
  <div class="tree">
    <el-tree
      :data="data"
      :props="props"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[10]"
      :icon="Menu"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <img v-if="data.type == 'Area'" :src="Area" />
          <img v-else-if="data.type == 'Line'" :src="Line" />
          <img v-else-if="data.type == 'Point'" :src="Point" />
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>
  <script  setup>
import { Menu } from "@element-plus/icons-vue";
import Area from "@/assets/images/Area.png";
import Line from "@/assets/images/Line.png";
import Point from "@/assets/images/Point.png";
const props = {
  /* 节点的key */
  label: "label",
  /* 子节点 key */
  children: "children",
  /* 设置节点禁选key */
  disabled: "disabled",
};
const data = [
  {
    id: 10,
    label: "图层目录",
    disabled: true,
    children: [
      { label: "区要素", type: "Area" },
      { label: "线要素", type: "Line" },
      { label: "点要素", type: "Point" },
    ],
  },
];
</script>
<style lang="scss" >
.tree {
  position: absolute;
  z-index: 1000;
  width: 200px;
  top:30px;
  right:10px;
  padding:20px;
  border-radius: 15px;
}
</style>
  